<!-- MyComponent.vue -->
<template>
  <view class="my-component">
    <uv-list>
      <uv-list-item
        v-for="(item, index) in rankData"
        :key="index"
        :title="item.name"
        :note="item.desc"
        :thumb="item.img"
        thumb-size="lg"
      ></uv-list-item>
    </uv-list>
  </view>
</template>

<script>
export default {
  name: "BeerRank",
  data() {
    return {
      rankData: []
    }
  },
  onLoad(options) {
    console.log(options)
    uni.request({
      url: `https://gitee.com/yethyeth/hackday-config-open/raw/master/rank/${options["type"]}/beer.json`,
      method: "GET",

      complete: res => {
        console.log(res)
        res.data.forEach(item => {
          item.desc = item.extra.reduce((acc, cur) => {
            return acc + " " + cur
          }, "")
        })
        this.rankData = res.data
      }
    })
  },
  methods: {
    // https://gitee.com/yethyeth/hackday-config-open/raw/master/rank/beer.json
    changeMessage() {
      this.message = "消息已改变！"
    }
  }
}
</script>

<style scoped>
.my-component {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: #f0f0f0;
}

button {
  margin-top: 10px;
  padding: 5px 10px;
  border-radius: 5px;
  background-color: #007aff;
  color: white;
}
</style>
